<template>
  <div>
    <div class="chartBox">
      <!-- 用户、司机注册量 -->
      <div id="driver_user" :style="{ width: '50%', height: '100%' }" />
      <div id="brokenChart" :style="{ width: '50%', height: '100%' }" />
    </div>
    <div class="chartBox">
      <!-- 司机男女占比 -->
      <div id="cakeChart" :style="{ width: '50%', height: '100%' }" />
      <div id="pillarsChart" :style="{ width: '100%', height: '100%' }" />
    </div>
  </div>
</template>

<script>
import { setuser, setdriver, menandWomen, pillarsEcharts } from '@/api/activityCharge'

export default {
  name: 'User',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      regNum: [], // 用户司机注册量
      pilList: [] // 日期占比
    }
  },
  mounted() {
    this.setdriver()// 用户,司机注册量
    // this.driver_user()
    // this.obd()
    this.brokenChart()
    this.cakeEcharts()// 司机男女占比
    this.pillarsEcharts() // 下单日期占比
  },
  methods: {
    setdriver() {
      setdriver().then(res => {
        console.log(res)
        this.regNum.push(res.data.length)
        console.log(this.regNum, 111111111)
        setuser().then(resp => {
          console.log(resp)
          this.regNum.push(resp.data.length)
          console.log(this.regNum, 222222)
          const driver_user = this.$echarts.init(document.getElementById('driver_user'))
          driver_user.setOption({
            title: {
              text: '用户司机报表',
              left: 'center'
            },
            tooltip: {
              trigger: 'axis'
            },
            xAxis: {
              type: 'category',
              data: ['司机', '用户']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: this.regNum, // 数据
                type: 'bar', // 图表类型
                itemStyle: {
                  color: '#5470C6'
                }
              }
            ]
          })
        })
      })
    },
    // obd() {
    //   setdriver().then(res => {
    //     console.log(res, 65656565)
    //   })
    // },
    brokenChart() {
      // 获取id并初始化图表
      var myChart = this.$echarts.init(document.getElementById('brokenChart'))
      // 配置项
      const option = {
        tooltip: {
          // 鼠标触摸显示值
          trigger: 'axis'
        },
        title: {
          text: '用户司机报表',
          left: 'center'
        },
        xAxis: {
          type: 'category', // 类型
          data: ['司机', '用户']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [1, 5],
            type: 'line' // 类型
          }
        ]
      }
      myChart.setOption(option) // 通过setOption()方法生成图表
    },
    cakeEcharts() {
      var female = 0 // 女
      var man = 0// 男
      menandWomen().then(res => {
        console.log(res.data)
        female = res.data[1].sum
        man = res.data[0].sum
        console.log(female, man)
        // 获取id并初始化图表
        var myChart = this.$echarts.init(document.getElementById('cakeChart')) // 调用图表方法并将参数（数据）传递过去
        const option = {
          tooltip: {
          // 鼠标触摸显示值
            trigger: 'item'
          },
          title: {
            text: '司机男女占比',
            left: 'center'
          },
          series: [
            {
            // name: '注册数',
              type: 'pie',
              radius: '50%',
              data: [
                { value: female, name: '女' },
                { value: man, name: '男' }
              ]
            }
          ]
        }
        myChart.setOption(option)
      })
    },
    pillarsEcharts() {
      pillarsEcharts().then(res => {
        console.log(res.data)
        this.pilList = res.data
        console.log(this.pilList)
        // 获取id并初始化图表
        var myChart = this.$echarts.init(document.getElementById('pillarsChart'))
        // 配置项
        const option = {
          tooltip: {
          // 鼠标触摸显示值
            trigger: 'item'
          },
          title: {
            text: '日期下单数占比',
            left: 'center'
          },
          series: [
            {
            // name: '注册数',
              type: 'pie',
              radius: '50%',
              data: [
                { value: this.pilList[0].sum, name: this.pilList[0].day + '日' },
                { value: this.pilList[1].sum, name: this.pilList[1].day + '日' },
                { value: this.pilList[2].sum, name: this.pilList[2].day + '日' }
              ]
            }
          ]
        }
        myChart.setOption(option) // 通过setOption()方法生成图表
      })
    }
  }
}
</script>

<style lang="scss">
.chartBox{
  display: flex;
  margin-top: 20px;
  height: 50vh;
}

</style>
